<template>
	<view>
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">配套设施</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(1)">
						<view class="no-data-r" v-if="!sspre||sspre.length == 0">请选择配套设施</view>
						<view v-else><span v-for="item in sspre" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
				<!-- <view class="acea-row row-middle row-between item border-b">
					<view class="label">楼层要求</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" v-model="floor" name='floor' placeholder="请输入楼层要求"
							placeholder-class="placeholder-class">
					</view>
				</view> -->
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						楼层
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">第</view>
						<input type="number" v-model="floor[0]">
						<view class="">层</view>
						<view class="margin-l">共</view>
						<input type="number" v-model="floor[1]">
						<view class="">层</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">所属品牌</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" >
				<!-- 		<input class="input-r" type="text" v-model="brandId" name='brandId' placeholder="请选择品牌"
							placeholder-class="placeholder-class" disabled> -->
							<chooseComp :dataform="dataform"  placeholder="请选择品牌" types="1" />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">拓展模式</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择拓展模式</view> -->

						<picker @change="patternChange" :value="patternIndex" :range="patternList" range-key='label'>
							<view class="uni-input" :class="patternName? '' : 'no-data-r'">
								{{ patternName ? patternName : '请选择拓展模式' }}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">拓展年度</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择拓展年度</view> -->
						<picker mode="date" :value="year" :start="startDate" :end="endDate" name='year'
							@change="yearChange">
							<view class="uni-input" :class="year ? '' : 'no-data-r'">{{year ?year :"请选择拓展年度"}}</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">
						开店数量
					</view>
					<view class="acea-row row-middle row-right item-r floor">
						<view class="">计划</view>
						<input type="number" v-model="cont1">
						<view class="">家</view>
						<view class="margin-l">已开</view>
						<input type="number" v-model="cont2">
						<view class="">家</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">铺面类型</view>
					<!-- <view class="acea-row row-middle row-right item-r sanjiao-right">
					<view class="no-data-r">请选择铺面类型</view>
				</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(4)">
						<view class="no-data-r" v-if=" !storefrontType || storefrontType.length == 0">请选择铺面类型</view>
						<view v-else><span v-for="item in storefrontType" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>
<!-- 				<view class="acea-row row-middle row-between item border-b ">
					<view class="label">意向转让费</view>
					<view class="acea-row row-middle row-right item-r">
						<view class="acea-row row-middle row-right small-ipt">
							<input type="number" placeholder="请输入转让费" v-model="transferFee" name='transferFee'>
							<text>万元以内</text>
						</view>
						<view class="acea-row row-middle meet" :class="transferStatus == 1?'':'no-meet'">
							<view class="meet-text">面议</view>
							<view class="switch" @click="transferStatus=(transferStatus == 1?0:1)">
								<image src="../static/images/switch_on.png" mode="" v-if="transferStatus == 1"></image>
								<image src="../static/images/switch_off.png" mode="" v-else></image>
							</view>
						</view>
					</view>
				</view> -->
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">最长租期</view>
					<view class="acea-row row-middle row-right item-r ">
						<!-- <view class="no-data-r">请选择</view> -->
						<input class="input-r" type="number" placeholder="请输入最长租期" v-model="reutLongdate"
							name='reutLongdate' placeholder-class="placeholder-class">
						<view>月</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">店面类型</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择店面类型</view> -->
						<picker @change="shopFrontTypeChange" :value="shopFrontTypeIndex" name='shopFrontType'
							:range="shopFrontTypeList" range-key='name'>
							<view class="uni-input" :class="shopFrontTypeName? '' : 'no-data-r'">
								{{ shopFrontTypeName ? shopFrontTypeName : '请选择店面类型' }}
							</view>
						</picker>
					</view>
				</view>

				<view class="acea-row row-middle row-between item border-b">
					<view class="acea-row row-middle row-right online">
						<view class="">层高</view>
						<input class="input-r" type="text" v-model="cenggao" name='cenggao'>
						<view class="">m </view>
						<view>进深</view>
						<input class="input-r" type="text" v-model="jianshen" name='jianshen'>
						<view class="">m</view>
						<view>开间</view>
						<input class="input-r" type="text" v-model="kaijian" name='kaijian'>
						<view class="">m </view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label ">店招</view>
					<view class="acea-row row-middle row-right floor">
						<input type="number" v-model="dianzhao1">
						<text>-</text>
						<input type="number" v-model="dianzhao2">
						<text>m²</text>

						<view class="margin-l">承重</view>
						<input type="number" placeholder-class="placeholder-class" placeholder="示例:300"
							v-model="chengzhong" name='chengzhong' style="width: 100rpx;">
						<view>g/m</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">临路状况</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(3)">
						<view class="no-data-r" v-if="!roadCondition || roadCondition.length == 0 ">请选择临路状况</view>
						<view v-else><span v-for="item in roadCondition" :key='item.id'> {{item.name}} , </span></view>
					</view>
				</view>

				<dictionaryType ref="dictionaryType" :gids='gids' @clickOk='clickOk' v-if="openPopupShow" :key="gids"
					:popupShow='openPopupShow' @popupClose="openPopupShow = false" />
				<view class="uni-p-b-98"></view>
			</view>
			<button class="submit-btn" form-type="submit">完成</button>
			<view class="uni-p-b-98"></view>
		</form>
		<wordSearch ref="wordSearch" :list="brandList" keyName="realname" keyId="id" v-model="dataform.brandId"
			@inChange="getBrandList" @name="(name)=> brandId = name" :page="0" />
	</view>
</template>

<script>
	import {
		Debounce
	} from '@/utils/validate.js'
	import {
		getBrandListApi
	} from '@/api/brand/index.js'
	import dictionaryType from '../components/dictionaryType.vue'
	import brandList from '../components/brandList.vue'
	import wordSearch from '../components/wordSearch/wordSearch.vue'
	import {
		dictionary
	} from "@/api/subletOfShop.js"

	import {
		InformationGroupAdd,
		GroupDetailApi,
		editPhzasInfo
	} from "@/api/subletOfShop.js"
	import chooseComp from '../components/chooseComp.vue'

	export default {
		components: {
			brandList,
			dictionaryType,
			wordSearch,
			chooseComp
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				openPopupShow: false,
				gids: '',
				kaijian: '', // 开间
				jianshen: '', // 进深
				cenggao: '', //层高
				transferFee: '',
				cont1: '',
				cont2: '',
				popupShow: false,
				floor: ['1','1'], //楼层要求
				brandName: '', //品牌名称
				transferPrice: '', //意向转让费
				transferStatus: 0,
				dianzhao1: '', //店招
				dianzhao2: '', //店招
				chengzhong: '', //承重
				shopFrontTypeList: [],
				shopFrontTypeIndex: 0,
				shopFrontTypeName: '',
				patternName: '',
				patternList: [{
					value: '0',
					label: '直营'
				}, {
					value: '1',
					label: '加盟'
				}, {
					value: '2',
					label: '合作经营'
				}, {
					value: '2',
					label: '其他'
				}],
				patternIndex: 0,
				year: '',
				sspre: [],
				linLuType: [],
				roadCondition: [],
				storefrontType: [],
				reutLongdate: '',
				dataform: {},
				brandList: [], //品牌列表
				brandId: '',
				infoId: ''
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {

		},
		onLoad(option) {
			this.getDictionary();
			this.getBrandList('')
			console.log(option.id)
			this.infoId = option.id ? option.id : ''
			this.getDetail()
		},
		methods: {
			brandClick() {
				this.$refs.wordSearch.open = true
			},
			//获取品牌列表
			async getBrandList(realname) {
				uni.showLoading({
					title: '加载中'
				});
				try {
					let res = await getBrandListApi({
						limit: 10,
						realname
					});
					this.brandList = res.data.list
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
				uni.hideLoading()
			},
			formSubmit: Debounce(function(e) {
				let that = this;
				e.detail.value = {
					...this.dataform,
					...e.detail.value
				}
				e.detail.value.brandId = this.dataform.brandId;
				e.detail.value.shopFrontType = this.shopFrontTypeName ? this.shopFrontTypeIndex : ''
				e.detail.value.pattern = this.patternName ? this.patternIndex : ''
				e.detail.value.linLuType = this.linLuType?this.linLuType.map(item => item.id).join(","):''
				e.detail.value.sspre =this.sspre?this.sspre.map(item => item.id).join(","):''
				e.detail.value.roadCondition = this.roadCondition?this.roadCondition.map(item => item.id).join(","):''
				e.detail.value.storefrontType = this.storefrontType?this.storefrontType.map(item => item.id).join(","):''
				e.detail.value.cont = this.cont1 + '-' + this.cont2
				e.detail.value.transferStatus = this.transferStatus?1:0;
				e.detail.value.dianzhao = this.dianzhao1 + '-' + this.dianzhao2;
				e.detail.value.askrentId = this.infoId ? this.infoId : ''
				e.detail.value.floor = this.floor?this.floor.join('-'):''
				// uni.$emit('askRent', e.detail.value)
				// uni.navigateBack()

				if (!this.infoId) {
					return this.$util.Tips({
						title: '未获取到发布的信息'
					})
				}

				editPhzasInfo(e.detail.value).then(res => {
					if (res.code == 200) {
						that.$util.Tips({
							title: '完善成功'
						}, {
							tab: 2,
							url: '/pages/releases/rentalStores/rentalStores'
						})
					} else {
						that.$util.Tips({
							title: '编辑失败'
						})
					}
				}).catch(e => {
					that.$util.Tips({
						title: '系统异常'
					})
				})

			}),
			opendiction(val) {
				this.openPopupShow = true
				if (val == 1) {
					// 配套设施
					this.gids = 15
				} else if (val == 2) {
					// 林路类型
					this.gids = 16
				} else if (val == 3) {
					// 临路状况
					this.gids = 26
				} else if (val == 4) {
					// 铺面类型
					this.gids = 17
				}
			},
			clickOk(val) {
				if (this.gids == 15) {
					this.sspre = val
					console.log(this.sspre)
				}
				if (this.gids == 26) {
					this.roadCondition = val
					console.log(this.roadCondition)
				}
				if (this.gids == 17) {
					this.storefrontType = val
					console.log(this.storefrontType)
				}
				if (this.gids == 16) {
					console.log('val', val)
					this.linLuType = val
					console.log(this.linLuType)
				}
				this.openPopupShow = false
			},
			getDictionary() {
				let gids = '21'
				dictionary({
					gids: gids
				}).then(res => {
					// this.payMenthData = res.data[18]
					// this.storefrontTypeList = res.data[21]
					// this.linLuTypeList = res.data[16]
					// this.credentialsList = res.data[20]
					this.shopFrontTypeList = res.data[21]
				})
			},
			yearChange(e) {
				this.year = e.detail.value;
			},
			shopFrontTypeChange(e) {
				
				this.shopFrontTypeIndex = this.shopFrontTypeList[e.detail.value].id;
				this.shopFrontTypeName = this.shopFrontTypeList[e.detail.value].name
				console.log(this.shopFrontTypeList)
			},
			patternChange(e) {
				this.patternIndex =this.patternList[e.detail.value].value;
				this.patternName = this.patternList[e.detail.value].label
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			ft(ids, names) {
				if(!ids || !names){
					return []
				}
				names = names.split('/')
				return ids.split(',').map((item, index) => ({
					id: item,
					describe: names[index],
					name: names[index]
				}))
			},
			getDetail() {
				let that = this;
				GroupDetailApi(this.infoId).then(res => {
					if (res.code == 200) {
						let d = res.data
						for(let k in d){
							this[k] = d[k]
						}
						this.dataform = d;
						
						d.brandId = Number(d.brandId)
						this.brandId = d.brandName
						this.dataform = {...d}
						this.sspre = this.ft(d.sspre, d.sspreName)
						console.log("this.floor",d)
						this.floor = d.floor?d.floor.split('-'):[1,1];
						
						this.dianzhao1 = d.dianzhao?d.dianzhao.split('-')[0]:''
						this.dianzhao2 = d.dianzhao?d.dianzhao.split('-')[1]:''
						this.cont1 = d.cont?d.cont.split('-')[0]:''
						this.cont2 = d.cont?d.cont.split('-')[1]:''
						
						if(d.pattern){
							let p = this.patternList.filter(item=>item.value == d.pattern)
							if(p.length>0){
								this.patternIndex = p[0].value
								this.patternName = p[0].label
							}
						}
						this.shopFrontTypeName = d.shopFrontTypeName
						this.linLuType = this.ft(d.linLuType, d.linLuTypeName)
						this.year = d.year
						this.roadCondition = this.ft(d.roadCondition, d.roadConditionName)
						this.storefrontType = this.ft(d.storefrontType, d.storefrontTypeName)
						
						this.transferStatus = d.transferStatus
						
	
					
					} else {
						this.$util.Tips({
							title: res.message
						})
					}

				}).catch(e => {
					this.$util.Tips({
						title: e
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}

	.item .small-ipt {
		// width: calc(100% - 140rpx);
		width: 60%;

	}

	.item .small-ipt input {
		display: block;
		width: 130rpx;
		text-align: right;
	}

	.title {
		font-size: 22px;
		text-align: center;
		font-weight: 500;
		flex: 1
	}

	@import '/static/css/releaseForm.css';
</style>